<template>
  <Blank>
    <div class="contact">
      <div class="bg" id="gd-map"></div>
      <ul>
        <li>地址：广东省深圳市福田区福保街道</li>
        <li>电话：15117835880</li>
        <li>邮箱：1942825058@qq.com</li>
      </ul>
    </div>
  </Blank>
</template>

<script lang="ts" setup>
import Blank from "@/components/blankCard/BlankCard.vue";
import AMap from "AMap"; // 引入高德地图
import { nextTick, onMounted } from "vue-demi";

const init = () => {
  var map = new AMap.Map("gd-map", {
    resizeEnable: true,
    center: [114.053746, 22.523007],
    zoom: 15,
    viewMode: "3D", //设置地图模式
    lang: "zh_cn", //设置地图语言类型
    mapStyle: "fresh",
  });
  //实时路况图层
  var marker = new AMap.Marker({
    position: [114.053746, 22.523007], //位置
  });
  map.add(marker); //添加到地图
};
onMounted(() => {
  nextTick(() => {
    init();
  });
});
</script>

<style lang="scss" scoped>
.contact {
  margin-top: 140px;
  .bg {
    margin: 20px 0;
    width: 100%;
    height: 300px;
    border: 1px solid #f5f5f5;
    border-radius: 5px;
    background-color: #f5f5f5;
  }
  ul {
    margin: 20px 0;
    list-style-type: none;
    li {
      font-size: 12px;
      color: #888;
      margin-bottom: 20px;
      letter-spacing: 1px;
    }
  }
}
</style>